<template>
  <div class="login">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../assets/images/icon_fanhui.png"/>
      </a>
      <a class="header_center" slot="center">
        <span>{{headerTitle}}</span>
      </a>
    </header-top>
    <div class="login-content">
      <div class="login-input-box" v-show="changePassword">
        <div class="login-input login-input-old" ref="oldPassword">
          <input type="password" placeholder="旧密码" v-model="oldPassword" @focus="handleFocus('oldPassword')"
                 @blur="handleBlur('oldPassword')"/>
          <img src="../../assets/images/icon_del.png" @click.stop="oldPassword=''"
               v-show="(oldPassword=='' || !oldPasswordInput)? false: true"/>
        </div>
      </div>
      <div class="login-input-box" :style="changePassword ? 'margin-top:-10px' : null">
        <div class="login-input login-input-phone" ref="newPassword">
          <input type="password" :placeholder="passwordPlaceholder" v-model="newPassword"
                 @focus="handleFocus('newPassword')" @blur="handleBlur('newPassword')"/>
          <img src="../../assets/images/icon_del.png" @click.stop="newPassword=''"
               v-show="(newPassword=='' || !newPasswordInput)? false: true"/>
        </div>
        <p class="line" v-show="loginInputHr"/>
        <div class="login-input login-input-password" ref="comfirnPassword">
          <input type="password" placeholder="确认密码" v-model="comfirnPassword" @focus="handleFocus('comfirnPassword')"
                 @blur="handleBlur('comfirnPassword')"/>
          <img src="../../assets/images/icon_del.png" @click.stop="comfirnPassword=''"
               v-show="(comfirnPassword=='' || !comfirnPasswordInput)? false: true"/>
        </div>
      </div>
      <div class="login-footer">
        <div>
          <x-button type="primary" :disabled="btnLogin" @click.native="submit">完成</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import {XButton} from 'vux'

  export default {
    name: "Password",
    components: {
      HeaderTop,
      XButton
    },
    mounted() {
      var {type} = this.$route.params;
      if (type == 'new') {
        this.headerTitle = '设置新密码';
        this.passwordPlaceholder = '新密码';
      } else if (type == 'change') {
        this.changePassword = true;
        this.headerTitle = '修改密码';
        this.passwordPlaceholder = '新密码';
      }
    },
    data() {
      return {
        oldPassword: '',
        newPassword: '',
        comfirnPassword: '',
        loginInputHr: true,
        headerTitle: '设置密码',
        passwordPlaceholder: '输入密码',
        changePassword: false,
        newPasswordInput: false,
        oldPasswordInput: false,
        comfirnPasswordInput: false,
      }
    },
    methods: {
      submit() {
        let {oldPassword, newPassword, comfirnPassword} = this;
        var {type} = this.$route.params;
        if (type == 'change') {
          if (!newPassword || !comfirnPassword || !oldPassword) {
            return false;
          }
        } else {
          if (!newPassword || !comfirnPassword) {
            return false;
          }
        }
        console.log({oldPassword, newPassword, comfirnPassword});
      },
      handleFocus(type) {
        let refObject = this.$refs[type];
        if (type == 'newPassword') {
          refObject.style.borderBottom = '1px solid #ffdccd';
          this['newPasswordInput'] = true
        }
        if (type == 'comfirnPassword') {
          refObject.style.borderTop = '1px solid #ffdccd';
          this['comfirnPasswordInput'] = true;
        }
        if (type == 'oldPassword') {
          refObject.style.borderTop = '1px solid #ffdccd';
          this['oldPasswordInput'] = true;
        }
        refObject.style.borderColor = '#ff6633';
        if (type != 'oldPassword') {
          this['loginInputHr'] = false;
        }
      },
      handleBlur(type) {
        let refObject = this.$refs[type];
        if (type == 'newPassword') {
          refObject.style.borderBottom = 'none';
        }
        if (type == 'comfirnPassword') {
          refObject.style.borderTop = 'none';
        }
        refObject.style.borderColor = '#ffdccd';
        if (type != 'oldPassword') {
          this['loginInputHr'] = true;
        }
        setTimeout(() => {
          if (type == 'newPassword') {
            this['newPasswordInput'] = false
          }
          if (type == 'comfirnPassword') {
            this['comfirnPasswordInput'] = false;
          }
          if (type == 'oldPassword') {
            this['oldPasswordInput'] = false;
          }
        }, 200);
      }
    },
    computed: {
      btnLogin() {
        let {oldPassword, newPassword, comfirnPassword} = this;
        var {type} = this.$route.params;
        if (type == 'change') {
          if (newPassword && comfirnPassword && oldPassword) {
            return false;
          }
        } else {
          if (newPassword && comfirnPassword) {
            return false;
          }
        }
        return true;
      }
    }
  }
</script>

<style scoped>
  .login {
    overflow-y: hidden;
  }

  .login-input-box {
    background-color: #fff;
    margin: 25px;
    margin-top: 73px;
  }

  .login-input {
    border: 1px solid #ffdccd;
    background-color: #fff;
  }

  .login-input-old {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

  .login-input-phone {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: none;
  }

  .login-input-password {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: none;
  }

  .login-input img {
    width: 24px;
    height: 24px;
    margin: 12px;
    position: absolute;
    right: 28px;
  }

  input {
    width: 75%;
    height: 48px;
    border: none;
    font-size: 14px;
    padding-left: 20px;
  }

  input:hover {
    border: none;
    outline: none;
  }

  input:focus {
    outline: none;
  }

  .login-footer div {
    margin: 25px;
    height: 48px;
    line-height: 48px;
    margin-top: -10px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    border-radius: 3px;
  }

</style>
